<template>
  <div>
    <el-button plain icon="el-icon-plus" @click="add">新增</el-button>
    <el-input
      placeholder="套餐名称"
      style="width: 500px"
      v-model="pageVo2.name"
    >
      <el-select
        v-model="pageVo2.sex"
        slot="prepend"
        placeholder="性别"
        style="width: 150px"
      >
        <el-option label="适用性别" :value="null"></el-option>
        <el-option label="适用男性" :value="1"></el-option>
        <el-option label="男女不限" :value="2"></el-option>
        <el-option label="适用女性" :value="0"></el-option>
      </el-select>
      <el-button
        slot="append"
        type="primary"
        icon="el-icon-search"
        @click="setmealInfo"
        >搜索</el-button
      >
    </el-input>
    <div>
      <el-table :data="setmealList" height="800" stripe>
        <el-table-column prop="code" label="套餐编码"> </el-table-column>
        <el-table-column prop="name" label="套餐名称"> </el-table-column>
        <el-table-column prop="helpcode" label="助记名"> </el-table-column>
        <el-table-column prop="sex" label="适用性别">
          <template slot-scope="scope">
            {{
              scope.row.sex == 1
                ? "适用男性"
                : scope.row.sex == 2
                ? "男女不限"
                : "适用女性"
            }}
          </template>
        </el-table-column>
        <el-table-column label="适用年龄">
          <template slot-scope="scope">
            {{ scope.row.minage }}-{{ scope.row.maxage }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="套餐价格"> </el-table-column>
        <el-table-column prop="remark" label="套餐介绍"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              plain
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange1"
      @current-change="handleCurrentChange1"
      :current-page="pageVo2.page"
      :page-sizes="[10, 20, 50]"
      :page-size="pageVo2.num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageVo2.total"
    >
    </el-pagination>

    <el-dialog
      title="删除套餐"
      style="border-radius: 100px"
      :visible.sync="delvisible"
      width="25%"
    >
      <span><h4>确认删除嘛？</h4></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delvisible = false">取消</el-button>
        <el-button type="primary" @click="delsetmealD">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="dialog-form"
      title="新增套餐"
      :visible.sync="dialogFormVisible"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form :model="setmeal" :rules="rules" ref="setmeal">
            <el-row>
              <el-col :span="12">
                <el-form-item label="套餐编码" prop="code">
                  <el-input class="inputForm" v-model="setmeal.code"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="套餐名称" prop="name">
                  <el-input class="inputForm" v-model="setmeal.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="套餐助记" prop="helpcode">
                  <el-input
                    class="inputForm"
                    v-model="setmeal.helpcode"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="适用性别" prop="sex">
                  <el-select v-model="setmeal.sex">
                    <el-option label="女" :value="0"></el-option>
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="不限" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="年龄下限" prop="minage">
                  <el-input
                    type="number"
                    class="inputForm"
                    v-model="setmeal.minage"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="年龄上限" prop="maxage">
                  <el-input
                    type="number"
                    class="inputForm"
                    v-model="setmeal.maxage"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="套餐价格" prop="price">
                  <el-input
                    type="number"
                    class="inputForm"
                    v-model="setmeal.price"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="成本价格">
                  <el-input
                    readonly
                    class="inputForm"
                    v-model="setmeal.cheprice"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="套餐介绍" prop="remark">
                  <el-input
                    type="textarea"
                    style="width: 200px"
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    v-model="setmeal.remark"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="注意事项" prop="attention">
                  <el-input
                    type="textarea"
                    style="width: 200px"
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    v-model="setmeal.attention"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item>
                  上传图片
                  <el-upload
                    :action="AddSetmeal"
                    ref="upload"
                    :data="setmeal"
                    name="pictureFile"
                    multiple
                    :on-success="upsuccess"
                    list-type="picture-card"
                    :auto-upload="false"
                  >
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{ file }">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleDownload(file)"
                        >
                          <i class="el-icon-download"></i>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file, this)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item class="left-align">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="submitUpload('setmeal')"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="项目信息" name="second">
          <div>
            <el-input placeholder="请输入项目名称" v-model="pageVo.name">
              <el-button
                slot="append"
                type="primary"
                icon="el-icon-search"
                @click="checklistInfo"
                >查询</el-button
              >
            </el-input>
            <el-table
              @selection-change="handleSelectionChange"
              :data="checklist"
              style="width: 100%"
            >
              <el-table-column prop="id" type="selection"></el-table-column>
              <el-table-column label="项目编码" prop="code"></el-table-column>
              <el-table-column label="项目名称" prop="name"> </el-table-column>
              <el-table-column label="价格" prop="price"> </el-table-column>
              <el-table-column label="项目说明" prop="remark">
              </el-table-column>
            </el-table>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageVo.page"
              :page-sizes="[10, 20, 50]"
              :page-size="pageVo.num"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageVo.total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    setmealInfo() {
      const loading = this.$loading({
        lock: true,
        text: "正在显示中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios.post("/rear/LYN/setmealInfo", this.pageVo2).then((req) => {
        loading.close();
        this.setmealList = req.data.list;
        this.pageVo2.total = req.data.total;
      });
    },
    handleDelete(index, row) {
      this.delvisible = true;
      this.delsetmeal.id = row.id;
    },
    delsetmealD() {
      const loading = this.$loading({
        lock: true,
        text: "正在删除中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .get("/rear/LYN/delSetmeal", { params: { id: this.delsetmeal.id } })
        .then((req) => {
          if (req.data > 0) {
            loading.close();
            this.delvisible = false;
            this.setmealInfo();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    handleSizeChange1(val) {
      this.pageVo2.num = val;
      this.setmealInfo();
    },
    handleCurrentChange1(val) {
      this.pageVo2.page = val;
      this.setmealInfo();
    },
    handleSizeChange(val) {
      this.pageVo.num = val;
      this.checklistInfo();
    },
    handleCurrentChange(val) {
      this.pageVo.page = val;
      this.checklistInfo();
    },
    handleSelectionChange(selectedRows) {
      this.setmeal.checkitemArray = selectedRows.map((row) => row.id);
      this.setmeal.cheprice = selectedRows.reduce(
        (sum, row) => sum + row.price,
        0
      );
    },
    upsuccess(response, file) {
      this.setmealInfo();
      this.$notify({
        title: "成功",
        message: file.name + "套餐保存成功！",
        type: "success",
      });
    },
    submitUpload(formName) {
      if (parseFloat(this.setmeal.cheprice) > parseFloat(this.setmeal.price)) {
        alert("成本价不能大于价格");
        return;
      }
      if (parseFloat(this.setmeal.minage) > parseFloat(this.setmeal.maxage)) {
        alert("年龄下限不能大于年龄下限");
        return;
      }
      if (this.setmeal.checkitemArray == undefined) {
        alert("请选择项目");
        return;
      }
      if (this.setmeal.checkitemArray.length == 0) {
        alert("必须选择一个项目");
        return;
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$refs.upload.submit();
          this.dialogFormVisible = false;
        } else {
          this.$message({
            message: "信息未输入完成",
            type: "error",
          });
          return false;
        }
      });
    },
    handleRemove(file) {
      this.$refs.upload.handleRemove(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },
    handleDownload(file) {
      console.log(file);
    },
    add() {
      this.dialogFormVisible = true;
      this.AddSetmeal = "/rear/LYN/upload";
      this.setmeal = { sex: 1 };
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.AddSetmeal = "/rear/LYN/UpSetmeal";
      this.setmeal = Object.assign({}, row);
      this.imgFalse = true;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    checklistInfo() {
      const loading = this.$loading({
        lock: true,
        text: "正在显示中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios.post("/rear/LYN/checkItemInfo", this.pageVo).then((req) => {
        loading.close();
        this.checklist = req.data.list;
        this.pageVo.total = req.data.total;
      });
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      imgFalse: false,
      checklist: [],
      pageVo: { name: null, page: 1, num: 10, sex: null, total: null },
      activeName: "first",
      disabled: false,
      AddSetmeal: "",
      pageVo2: { name: null, sex: null, page: 1, num: 10, total: null },
      setmealList: [],
      delsetmeal: { id: null },
      delvisible: false,
      dialogImageUrl: "",
      setmeal: {
        code: null,
        name: null,
        helpcode: null,
        sex: 1,
        minage: null,
        maxage: null,
        price: null,
        cheprice: null,
        remark: null,
        attention: null,
        img: null,
        checkitemArray: [],
      },
      rules: {
        code: [{ required: true, message: "请输入套餐编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
        helpcode: [
          { required: true, message: "请输入助记名", trigger: "blur" },
        ],
        minage: [
          { required: true, message: "请输入年龄下限", trigger: "blur" },
        ],
        maxage: [
          { required: true, message: "请输入年龄上限", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        remark: [
          { required: true, message: "请输入套餐介绍", trigger: "blur" },
        ],
        attention: [
          { required: true, message: "请输入注意事项", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.setmealInfo();
    this.checklistInfo();
  },
};
</script>

<style scoped>
.inputForm {
  width: 300px;
}

.left-align {
  display: flex;
  justify-content: flex-end;
}
.el-dialog {
  border-radius: 15px;
}
</style>